<template>
    <div class="middle-box">
        <div class="middle-img">
            <img src="~assets/img/11.png" alt=""/>
            <div class="container">
                <div class="warp">
                    <div class="box warp-box1" @click = "$router.push('/cateory')">
                            <h3>众邦宝30天</h3>
                            <div class="ridus">
                                <div class="text">
                                    <p>4<span>.00%</span></p>
                                    <i>满期年化收益率</i>
                                </div>
                            </div>
                            <p class="money">银行贷款</p>
                    </div>
                    <div class="box warp-box2" @click = "$router.push('/cateory')">
                        <h3>新网级得利</h3>
                        <div class="ridus">
                            <div class="text">
                                <p>4<span>.20%</span></p>
                                <i>年化收益率</i>
                            </div>
                        </div>
                        <p class="money">每90天付息|本金保障</p>
                    </div>
                    <div class="box warp-box3" @click = "$router.push('/cateory')">
                        <h3>众邦宝30天</h3>
                        <div class="ridus">
                            <div class="text">
                                <p>6<span>.00%</span></p>
                                <i>近一年年化收益率</i>
                            </div>
                        </div>
                        <p class="money">银行贷款|当日起息</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import 'src/router.js'
export default {

}
</script>

<style lang="scss" scoped>
    a{
        text-decoration: none;
    }
    .container{
        width: 940px;
        position: absolute;
        top: 0;
        height: 100%;
        left: -100%;
        margin-left:-470px;
        animation: c 3s;
        animation-fill-mode: forwards;
    }
    .middle-img{
        width: 100%;
        height: 437px;
        position: relative;
        img{
            width: 100%;
            height: 437px;
        }
        .warp{
            position: absolute;
            top: 52px;
            right: -20px;
            .box{
                width:204px;
                height:291px;
                background:rgba(0,134,255,1);
                opacity:0.7;
                float: left;
                margin-right: 29px;
                text-align: center;
                position: relative;
                transition: all 2s;
                &:hover{
                    top: -10px;
                }
                h3{
                    font-size:17px;
                    color: #fff;
                    margin-top: 26px;
                }
                .ridus{
                    width:117px;
                    height:117px;
                    border:3px solid rgba(255,255,255,1);
                    opacity:0.9;
                    border-radius: 50%;
                    margin: 30px auto 60px;
                    .text{
                        margin-top: 40px;
                        p{
                            font-size:29px;
                            color: #fff;
                            span{
                                font-size: 20px;
                            }
                        }
                        i{
                            font-size:10px;
                            color: #fff;
                        }
                    }
                }
                .money{
                    font-size:10px;
                    color: #fff;
                }
            }
            .warp-box2{
                background: #5748E9;
            }
            .warp-box3{
                background: #0086FF;
            }
        }
    }
    @keyframes c{
        0%{
            left: -100%;
        }
        100%{
            left: 50%;
        }
    }
</style>
